import React from 'react';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import LinkPage from './components/pages/LinkPage';
import GamePage from './components/pages/GamePage';
import Root from './components/pages/Root';
import MainPage from './components/pages/MainPage';
import ThemePage from './components/pages/ThemePage';
import LoadingPage from './components/pages/LoadingPage';
import ResultPage from './components/pages/ResultPage';
import BadPage from './components/pages/BadPage';

function App(): JSX.Element {
  const router = createBrowserRouter([
    {
      path: '/',
      element: <Root />,
      errorElement: < BadPage/>,
      children: [
        { path: '/', element: <MainPage /> },
        { path: '/themes', element: <ThemePage /> },
        { path: '/loading/:roomId', element: <LoadingPage /> },


        {
          path: `/linkpage/:roomId`,
          element: <LinkPage />,
        },
        {
          path: '/game',
          element: <GamePage />,
        },
        {
          path: '/result',
          element: <ResultPage />,
        },
      ],
    },
  ]);

  return <RouterProvider router={router} />;
}

export default App;
